<template>
  <div class="root">
    <el-popover
      placement="top-start"
      :title="$store.getters.getTitle"
      width="300px"
      trigger="hover"
    >
      <MinUserInfo :userInfo="userInfo"></MinUserInfo>
      <div class="block" slot="reference"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
    </el-popover>

    <!-- 导航 -->
    <nav class="nav">
      <router-link
        to="/home/first_page"
        class="nav-item is-active"
        active-color="orange"
        tag="a"
        >首页</router-link
      >
      <router-link
        to="/home/second_page"
        class="nav-item"
        active-color="#da18ea"
        v-if="userInfo != null"
        tag="a"
        >{{userInfo.identity == 0 ? '我的账单' : "我的工作台"}}</router-link
      >
      <router-link
        to="/home/third_page"
        class="nav-item"
        active-color="blue"
        tag="a"
        >商品列表</router-link
      >
      <router-link
        to="/home/dynamic"
        class="nav-item"
        active-color="red"
        tag="a"
        >动态资讯</router-link
      >
      <router-link
        to="/home/about"
        class="nav-item"
        active-color="rebeccapurple"
        tag="a"
        >关于我们</router-link
      >
      <span class="nav-indicator"></span>
    </nav>
  </div>
</template>
<script>
import MinUserInfo from '@/components/MinUserInfo'
export default {
  components : {
    MinUserInfo
  },
  computed : {},
  data() {
    return {
      img:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
  
    };
  },
  created(){
  //  this.userInfo = this.$store.getters.getUserInfo
  },
  computed: {
    userInfo(){
      return this.$store.getters.getUserInfo
    },
    navStatus() {
      return this.$store.state.navStatus;
    },
    circleUrl(){
      if(this.$store.getters.getUserInfo == null){
        return "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      }
      else {
        return "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      }
    }
  },
  watch: {
    navStatus: function (newd, old) {
      this.changNav(newd);
    },
  },
  methods: {
    
    init() {
      const indicator = document.querySelector(".nav-indicator");
      const items = document.querySelectorAll(".nav-item");
      function handleIndicator(el) {
        // console.log(el);
        items.forEach((item) => {
          item.classList.remove("is-active");
          item.removeAttribute("style");
        });
        indicator.style.width = `${el.offsetWidth}px`;
        indicator.style.left = `${el.offsetLeft}px`;
        indicator.style.backgroundColor = el.getAttribute("active-color");
        el.classList.add("is-active");
        el.style.color = el.getAttribute("active-color");
      }
      items.forEach((item, index) => {
        item.addEventListener("click", (e) => {
          // console.log(e.target)
          handleIndicator(e.target);
        });
        //item.classList.contains("is-active") && handleIndicator(item);
      });
      this.changNav(this.$store.state.navStatus);
    },
    changNav(index) {
      //js控制导航栏
      const indicator = document.querySelector(".nav-indicator");
      const items = document.querySelectorAll(".nav-item");
      items.forEach((item) => {
        item.classList.remove("is-active");
        item.removeAttribute("style");
      });

      indicator.style.width = `${items[index].offsetWidth}px`; //1 表示导航栏下标，从0开始
      indicator.style.left = `${items[index].offsetLeft}px`;
      indicator.style.backgroundColor = items[index].getAttribute(
        "active-color"
      );
      items[index].classList.add("is-active");
      items[index].style.color = items[index].getAttribute("active-color");
    },
  },
  mounted() {
    this.init();
    // console.log('mounted   d')
  },
};
</script>
<style scoped>
* {
  box-sizing: border-box;
}
.block {
  display: inline;
  position: relative;
  left: 85%;
  top: 20px;
  cursor: pointer;
  /* border: 1px solid red; */
}
.root {
  /* border: 1px solid red; */
  width: 100%;
  /* position: relative; */
}
body {
  text-align: center;
  /* display: flex; */
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-image: url("/assets/img/debut_light.png");
}

.nav {
  display: inline-flex;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  background-color: #fff;
  padding: 0 20px;
  border-radius: 40px;
  box-shadow: 0 10px 40px rgba(159, 162, 177, 0.8);
  margin-left: 25%;
  /* border: 1px solid green; */
}

.nav-item {
  color: #83818c;
  padding: 20px;
  text-decoration: none;
  transition: 0.3s;
  margin: 0 6px;
  z-index: 1;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  position: relative;
}
.nav-item:before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #dfe2ea;
  border-radius: 8px 8px 0 0;
  opacity: 0;
  transition: 0.3s;
}

.nav-item:not(.is-active):hover:before {
  opacity: 1;
  bottom: 0;
}

.nav-item:not(.is-active):hover {
  color: #333;
}

.nav-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  transition: 0.4s;
  height: 5px;
  z-index: 1;
  border-radius: 8px 8px 0 0;
}

@media (max-width: 580px) {
  .nav {
    overflow: auto;
  }
}
</style>